<template>
    <el-popconfirm v-bind="customProps" @confirm="onConfirm" @cancel="onCancel" @visible-change="onVisibleChange">
        <template #reference>
            <slot name="reference"></slot>
        </template>
        <template #actions="{ confirm, cancel }">
            <slot name="actions" :confirm="confirm" :cancel="cancel"></slot>
        </template>
    </el-popconfirm>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed, onMounted, ref } from 'vue';
import type { PopconfirmProps } from 'element-plus';
import { useThemeStore } from '@/stores';
const observer = ref<MutationObserver | null>(null);

onMounted(() => {
    // 创建观察者来监听DOM变化
    observer.value = new MutationObserver((mitations) => {
        mitations.forEach((mutation) => {
            if (mutation.type === 'childList') {
                const popconfirms = document.querySelectorAll('.el-popconfirm');
                if (popconfirms.length > 0) {
                    setStyle()
                }
            }
        })
    })
    observer.value.observe(document.body, {
        childList: true,
        subtree: true
    });
});

const setStyle = () => {
    const el_popper = document.querySelectorAll('.el-popper');
    const el_popconfirm = document.querySelectorAll('.el-popconfirm');
    if (!el_popper || !el_popconfirm) return
    if (el_popper.length > 0 && el_popconfirm.length > 0) {
        el_popper.forEach((item: any) => {
            item.style.setProperty('--el-bg-color-overlay', themeStore.tabColor)
        })
        el_popconfirm.forEach((item: any) => {
            item.style.color = themeStore.layoutColor.mTextColor;
        })
    }
}
const themeStore = useThemeStore();
const props = defineProps<PopconfirmProps>();
const customProps = computed(() => {
    const { teleported, ...rest } = props;
    return rest;
})
const emit = defineEmits(['confirm', 'cancel', 'visible-change']);
const onConfirm = () => {
    emit('confirm');
};

const onCancel = () => {
    emit('cancel');
};

const onVisibleChange = (visible: boolean) => {
    emit('visible-change', visible);
};
</script>

<style lang="less">
.el-popper {
    width: fit-content !important;
}
</style>